<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
<div id="rrapp" class="page flex-col">
  <img
          class="image_2"
          referrerpolicy="no-referrer"
          :src="certificate.img"
  />
  <div class="text-wrapper_2 flex-col">
    <span class="text_2"><a :href="certificate.img" :download="certificate.img" style="color: #0E6EB8;">立即下载</a></span>
  </div>

</div>
</body>
</html>

<script src="${request.contextPath}/statics/js/jquery.min.js"></script>
<script src="${request.contextPath}/statics/js/materialize.min.js"></script>
<script src="${request.contextPath}/statics/js/owl.carousel.min.js"></script>
<script src="${request.contextPath}/statics/js/fakeLoader.min.js"></script>
<script src="${request.contextPath}/statics/js/contact-form.js"></script>
<script src="${request.contextPath}/statics/js/main.js"></script>
<script src="../statics/js/vue.min.js"></script>
<script>


  var vm = new Vue({
    el: '#rrapp',
    data: {
      id: '',
      certificate:{},
      cerList: []
    },
    async created(){
      var url = location.search; //获取url中"?"符后的字串
      var tRequest = new Object();
      if (url.indexOf("?") != -1) {   //判断 URL 中是否包含查询字符串
        var str = url.substr(1);   //如果 URL 中包含查询字符串，截取查询字符串，去掉前面的“?”号。
        strs = str.split("&");    //将查询字符串按“&”号分割成一个个参数对。
        for(var i = 0; i < strs.length; i ++) {    //循环遍历所有的参数对。
          tRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);    //对每一个参数对进行处理，将参数名和参数值存储到 tRequest 对象中。
        }
      }
      this.id = tRequest.id
      await this.query(this.id);

    },
    methods:{

      query(id){
        $.ajax({
          type: 'GET',
          url: '${request.contextPath}/h5/queryCerImg/' + id,
          data: {},
          success: function (res) {
            console.log(res)
            if(res.code === 0){
              vm.certificate =  res.data
            }else{
              alert(res.msg);
            }
            // vm.dataForm = {}
          }
        })
      },
    },
  });
</script>

<style>
  .page {
    background-color: rgba(255, 255, 255, 1);
    position: relative;
    width: 100%;
    height: 812px;
    overflow: hidden;
  }

  .image_1 {
    width: 100%;
    height: 44px;
  }

  .text-wrapper_1 {
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2fa6c2ca233bd6eb315405ee3ed1a50cc5c98f39fbf9a53c7b299bef7cb1e35d)
    100% no-repeat;
    background-size: 100% 100%;
    padding: 10px 151px 9px 152px;
  }

  .text_1 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 18px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
  }

  .image_2 {
    width: 100%;
    height: 609px;
    margin-top: 8px;
  }

  .text-wrapper_2 {
    padding: 26px 159px 32px 160px;
  }

  .text_2 {
    overflow-wrap: break-word;
    color: rgba(14, 110, 184, 1);
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 20px;
  }

  .image_3 {
    width: 100%;
    height: 30px;
    margin-top: -1px;
  }

  body * {
    box-sizing: border-box;
    flex-shrink: 0;
  }
  body {
    font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;
  }
  input {
    background-color: transparent;
    border: 0;
  }
  button {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
    background-color: transparent;
  }

  button:active {
    opacity: 0.6;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .justify-start {
    display: flex;
    justify-content: flex-start;
  }
  .justify-center {
    display: flex;
    justify-content: center;
  }

  .justify-end {
    display: flex;
    justify-content: flex-end;
  }
  .justify-evenly {
    display: flex;
    justify-content: space-evenly;
  }
  .justify-around {
    display: flex;
    justify-content: space-around;
  }
  .justify-between {
    display: flex;
    justify-content: space-between;
  }
  .align-start {
    display: flex;
    align-items: flex-start;
  }
  .align-center {
    display: flex;
    align-items: center;
  }
  .align-end {
    display: flex;
    align-items: flex-end;
  }

</style>
